<template>
  <div id="background" class="verify order-submit">
    <!-- //顶部导航栏 -->
    <van-nav-bar title="确认订单" left-text="返回" left-arrow @click.native="$router.go('-1')"></van-nav-bar>
    <!-- //水平分割线 -->
    <div class="decorate"></div>
    <!-- //地址区域 -->
    <van-cell>
      <div class="flex area jc-sb aic">
        <van-icon name="location-o"></van-icon>
        <div class="flex2 jc-c ml-15 fg2">
          <p class="flex">
            <span class="custom-title">张三 </span>
            <span class="custom-title">13800000000</span>
          </p>
          <span class="custom-title fonts">
            广东深圳南山区高新园
          </span>
        </div>
        <van-icon class="f999" name="arrow" />
      </div>
    </van-cell>
    <div id="goods">
      <van-cell-group>
        <van-cell title="运费(满50元免运费)" />
      </van-cell-group>
      <van-card :num="3" :price="3000" desc="生态基地种植 饱满圆润脆甜 皮薄肉厚多汁" title="A级-阳光冬枣（中）约2.6-3斤"
        thumb="https://mall.s.maizuo.com/9aba9f63c14a9aa7d469b62a0f9cde41.png"></van-card>
      <!-- //尾部单元格 -->
      <van-cell-group>
        <van-cell title="商品总金额" value="¥100.00" />
      </van-cell-group>
      <van-cell-group>
        <van-cell title="运费" :value="'¥'+(detail.expressFee/100).toFixed(2)" />
      </van-cell-group>
    </div>
  
    <div id="cell">
      <van-cell is-link title="优惠券" icon="comment-o" value="共3张可用"></van-cell>
      <van-cell icon="comment-o" value="0张券可用" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template slot="title">
          <span class="custom-title">苏打券</span>
        </template>
      </van-cell>
      <van-cell icon="gem-o" value is-link>
        <p class="flex jc-sb">
          <span class="custom-title">余额</span>
          <span class="custom-title red">¥0.00</span>
        </p>
      </van-cell>
      <van-cell icon="balance-list-o" value="不开发票" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template slot="title">
          <span class="custom-title">发票</span>
        </template>
      </van-cell>
    </div>
  
    <!-- 优惠券弹窗 -->
  
    <div class="flex aic bg-fff mt-15 pt-10 pb-10" style="justify-content: flex-end;">
      <span>合计: &yen;{{300.00}}</span>
      <van-button type="danger" class="ml-10 mr-20" @click="submitOrder">提交订单</van-button>
    </div>
  
    <!-- 支付方式弹窗 -->
    <van-action-sheet v-model="show" title="支付方式" close="action">
      <div class="content">
        <van-radio-group v-model="payWay">
          <p class="flex aic jc-sb pl-15 pr-15">
            <img style="width:25px;" src="../../../assets/img/wx.png" alt="">
            <van-radio name="wx"></van-radio>
          </p>
          <p class="flex aic jc-sb pl-15 pr-15 mt-15">
            <img style="width:25px;" src="../../../assets/img/zfb.png" alt="">
            <van-radio name="zfb"></van-radio>
          </p>
  
          <div class="flex jc-c">
            <van-button @click="payNow" type="danger" style="width: 90%;margin:30px auto;">立即支付</van-button>
          </div>
        </van-radio-group>
  
      </div>
    </van-action-sheet>
  
  </div>
</template> 


<script>
import PayWay from './verify/PayWay.vue'
import request from '../../../utils/request'
export default {
  components: {
    PayWay
  },
  data() {
    return {
      show: false,
      payWay: 'wx',
      preOrderId: '',
      detail: {},  // 预订单详情
    }
  },

  created() {
    this.preOrderId = this.$route.query.preOrderId;
    this.getPreOrderDetail();
  },

  methods: {
    // 回去预订单详情
    getPreOrderDetail() {
      let params = {
        preOrderId: this.preOrderId
      }
      request.get('/preOrder/detail', { params }).then(res => {
        this.detail = res.result;
      })
    },

    // 点击立即支付, 调起微信支付或支付宝支付, 成功之后去创建订单
    submitOrder() {
      let data = {
        addressInfo: 'xxxx',
        allFee: 500, // 合计的费用
        discount: 0.8,
        preOrderId: this.preOrderId,
        payWay: this.payWay, // 支付方式
      }
      request.post('/order/create', data).then(res => {
        // 订单创建成功支付, 显示立即支付页面
        this.show = true;
      })
    },

    // 立即支付
    payNow() {
      setTimeout(() => {
        this.$dialog.alert({
          title: '温馨提示',
          message: '支付成功',
        }).then(() => {
          // on close
          // 跳转到订单详情页面
          this.$router.push({
            path: '/order/detail',
          })
        });
      }, 500)
    }
  }

}
</script>

<style lang="less">
@import "./verify.less";

.order-submit {
  padding-bottom: 60px;
}
</style>